import Vue from "vue";
Vue.directive("dragScroll", {
  bind(el, binding, vnode, oldVnode) {
    const $box = el;
    let left = 0;
    let oldX = 0;
    let handleMove = function (e) {
      handleChangeScroll(e.clientX);
    };

    let handleChangeScroll = (clientX) => {
      let x = left + (oldX - clientX);
      if (x < 0) x = 0;
      $box.scrollTo(x, 0);
    };

    $box.addEventListener("mousedown", function (e) {
      oldX = e.clientX;
      left = $box.scrollLeft;
      document.addEventListener("mousemove", handleMove);
    });

    document.addEventListener("mouseup", function () {
      document.removeEventListener("mousemove", handleMove);
    });
  },
});
